<template>
    <div>
        <template v-for="child in children">
            <el-menu-item
                v-if="!child.children"
                :key="child.key"
                :index="child.key"
            >
                <template #title>{{ child.label }}</template>
            </el-menu-item>

            <el-submenu
                v-else
                :key="child.key"
                :index="child.key"
            >
                <template #title>
                    <span>{{ child.label }}</span>
                </template>
                <menu-items :children="child.children" />
            </el-submenu>
        </template>
    </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'menu-items',
    props: ['children'],
})
</script>

